var tabData = [
  {
    title: "系统流程框架",
    content: `<div>
				这是系统的内容
			</div>`
  },
  {
    title: "stm32控制",
    content: `<div class="other">
    <div class="form">
    <div class="light">
    灯开关&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<label class="switch">
    <input type="checkbox" id="light_switch"  onclick="light(this)">
    <span class="slider round"></span>
    </label></div>
    <div class="temsensor">
			温度&nbsp;&nbsp;:&nbsp;&nbsp;&nbsp;<input type="text" id="temsensor" value=""/></div>
      <div class="humisensor">
			湿度&nbsp;&nbsp;:&nbsp;&nbsp;&nbsp;<input type="text" id="humisensor" value=""/></div>
      <div class="bat">
      电量&nbsp;&nbsp;:&nbsp;&nbsp;&nbsp;<input type="text" id="bat" value=""/></div>
      <button type="button" onclick="get32(this)" id="get" >获取</button>
      </div>
	</div>`
  },
  {
    title: "modbus控制",
    content: `<div class="other">
    <div class="form1">
    <div class="paifeng">排风开关&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<label class="switch">
    <input type="checkbox" onclick="paifeng(this)"id="paifeng">
    <span class="slider round"></span>
    </label></div>
    <div class="kongqijinghuaqi">
    空气净化器开关&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<label class="switch">
    <input type="checkbox" onclick="kongqijinghuaqi(this)"id="kongqijinghuaqi">
    <span class="slider round"></span>
    </label></div>
        <div class="co2">
        CO2检测仪器&nbsp;:&nbsp;<input type="text" id="TVOC" value=""/></div>
        <div class="jiaquan">
        甲醛检测仪器&nbsp;:&nbsp;<input type="text" id="Formaldehyde" value=""/></div>
        <button type="button" onclick="get(this)" id="get" >获取</button>
        </div>
  </div>`
  },
  {
    title: "监控",
    content: `<div class="other">
    <div class="form">
    <div class="video">
        <img src="http://192.168.100.41:8080/?action=stream" /> 
        </div>
        </div>
        </div>`
  }   // 上面的src是视频流地址，运行之前需要将IP换成产生视频流的机器IP
];

function get() {
  var xhr = new XMLHttpRequest(); // 创建XMLHttpRequest对象
  var url = ""; // 请求的URL

  xhr.open("POST", url, true); // 配置请求：POST方法、URL、异步请求

  var post_req = {
    "type": 1,
    "limit": "all"
  };

  xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status === 200) { // 请求完成且成功
      var response = xhr.responseText; // 获取响应数据
      var info = JSON.parse(response)  //将json字符串反序列化为json对象
      console.log(info); // 在浏览器控制台打印响应数据

      for (var i = 0; i < info.data.length; i++) {
        // console.log('data = ', info.data[i].val)

        if (info.data[i].key == 101) {
          document.getElementById('Formaldehyde').value = info.data[i].val;
        } else if (info.data[i].key == 102) {
          document.getElementById('TVOC').value = info.data[i].val;
        }
      }
    }
  };

  //将json对象序列化为json字符串
  xhr.send(JSON.stringify(post_req)); // 发送请求，并将数据转换为JSON字符串
}

function get32() {
  var xhr = new XMLHttpRequest(); // 创建XMLHttpRequest对象
  var url = ""; // 请求的URL

  xhr.open("POST", url, true); // 配置请求：POST方法、URL、异步请求

  var post_req = {
    "type": 1,
    "limit": "all"
  };

  xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status === 200) { // 请求完成且成功
      var response = xhr.responseText; // 获取响应数据
      var info = JSON.parse(response)  //将json字符串反序列化为json对象
      console.log(info); // 在浏览器控制台打印响应数据

      for (var i = 0; i < info.data.length; i++) {
        // console.log('data = ', info.data[i].val)

        if (info.data[i].key == 3011) {
          document.getElementById('temsensor').value = info.data[i].val;
        } else if (info.data[i].key == 3012) {
          document.getElementById('humisensor').value = info.data[i].val;
        } else if (info.data[i].key == 302) {
          document.getElementById('bat').value = info.data[i].val;
        }
      }
    }
  };

  //将json对象序列化为json字符串
  xhr.send(JSON.stringify(post_req)); // 发送请求，并将数据转换为JSON字符串
}
var serverAddress = "http://192.168.0.106:80";

function light(obj) {
  var v = document.getElementById("light_switch");
  var xhr = new XMLHttpRequest();
  var url = "";
  xhr.open("POST", url, true);
  var stm32open_light = {
    "key": 303, //数据点唯一标识(确保数据点表内的唯一性)
    "type": 1, //指令类型：1-控制指令
    "val": "1" //数据点键值，必须用字符串，因为不一定是什么类型的
  }
  var stm32close_light = {
    "key": 303, //数据点唯一标识(确保数据点表内的唯一性)
    "type": 1, //指令类型：1-控制指令
    "val": "0" //数据点键值，必须用字符串，因为不一定是什么类型的
  }
  console.log("***********");
  var stm32open_light_json = JSON.stringify(stm32open_light);
  var stm32close_light_json = JSON.stringify(stm32close_light);
  xhr.setRequestHeader("Content-Type", "application/json");
  xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status === 200) {
      console.log("--------------");
      v.value = xhr.responseText;
    };
  }
  if (obj.checked) {
    console.log("++++++++++++++++");
    xhr.send(stm32open_light_json);
  } else {
    xhr.send(stm32close_light_json);
  }
}
function paifeng(obj) {
  var x = document.getElementById("0");
  var xhr = new XMLHttpRequest();
  var url = "";
  xhr.open("post", url, true);
  var open_paifeng = {
    "key": 103, //数据点唯一标识(确保数据点表内的唯一性)
    "type": 1, //指令类型：1-控制指令
    "val": "1" //数据点键值，必须用字符串，因为不一定是什么类型的
  }
  var close_paifeng = {
    "key": 103, //数据点唯一标识(确保数据点表内的唯一性)
    "type": 1, //指令类型：1-控制指令
    "val": "0" //数据点键值，必须用字符串，因为不一定是什么类型的
  }
  var open_paifeng_json = JSON.stringify(open_paifeng);
  var close_paifeng_json = JSON.stringify(close_paifeng);
  xhr.setRequestHeader("Content-Type", "application/json");
  xhr.onreadystatechange = function () {
    if (xhr.readyState == 4 && xhr.status == 200) {
      v.value = xhr.responseText;
    };
  }
  if (obj.checked) {
    xhr.send(open_paifeng_json);
  } else {
    xhr.send(close_paifeng_json);
  }
}
function kongqijinghuaqi(obj) {
  var x = document.getElementById("0");
  var xhr = new XMLHttpRequest();
  var url = "";
  xhr.open("post", url, true);
  var open_kongqijinghuaqi = {
    "key": 104, //数据点唯一标识(确保数据点表内的唯一性)
    "type": 2, //指令类型：2-控制指令
    "val": "1" //数据点键值，必须用字符串，因为不一定是什么类型的
  }
  var close_kongqijinghuaqi = {
    "key": 104, //数据点唯一标识(确保数据点表内的唯一性)
    "type": 2, //指令类型：2-控制指令
    "val": "0" //数据点键值，必须用字符串，因为不一定是什么类型的
  }
  var open_kongqijinghuaqi_json = JSON.stringify(open_kongqijinghuaqi);
  var close_kongqijinghuaqit_json = JSON.stringify(close_kongqijinghuaqi);
  xhr.setRequestHeader("Content-Type", "application/json");
  xhr.onreadystatechange = function () {
    if (xhr.readyState == 4 && xhr.status == 200) {
      v.value = xhr.responseText;
    };
  }
  if (obj.checked) {
    xhr.send(open_kongqijinghuaqi_json);
  } else {
    xhr.send(close_kongqijinghuaqit_json);
  }
}
function pageClick(button) {
  // 移除所有选项卡的活动状态
  $(button).siblings().removeClass("active");

  // 添加当前点击选项卡的活动状态
  $(button).addClass("active");

  // 获取当前选项卡的文本内容
  var tabTitle = $(button).text();

  // 根据选项卡标题获取相应的内容
  var content = "";
  for (var i = 0; i < tabData.length; i++) {
    if (tabData[i].title === tabTitle) {

      content = tabData[i].content;
      break;
    }
  }

  // 更新顶部栏的标题
  $("#flTitle").text(tabTitle);

  // 更新内容区域的内容
  $(".content").empty().html(content); // 清空并更新内容
}
